<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="../build/g6.js"></script>
  <script src="./assets/d3-4.13.0.min.js"></script>
  <script src="../build/plugins.js"></script>
  <title>云栖 demo 2</title>
</head>

<body>
  <div id="mountNode"></div>
  <script>
    const { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceCollide } = d3;
    const {Util} = G6;
    setTimeout(()=>{
    $.getJSON('./assets/data/g6-actived-system.json', data => {
      // for (let index = 0; index < 160; index++) {
      //   data.nodes.push({
      //     pv: Math.random()*13920,
      //     domain: 1
      //   });
      // }
      // data.nodes.forEach((node,index)=>{
      //   node.index = index;
      // });
      // console.log(JSON.stringify(data, null, '  '));
      // 设置映射
      const Mapper = G6.Plugins['tool.mapper'];
      const nodeColorMapper = new Mapper('node', 'index', 'color', ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9']);
      const nodeSizeMapper = new Mapper('node', 'pv', 'size', [4, 28], {
        scaleCfg: {
          type: 'log'
        }
      });
      let simulation;

      const graph = new G6.Graph({
        container: 'mountNode',
        height: window.innerHeight,
        fitView: 'cc',
        plugins: [nodeColorMapper, nodeSizeMapper],
        layout: {
          auto: 'once',
          processer(nodes) {
            // 按 100，剩余所有，分割节点数据集
            const nodes_100 = [];
            const nodes_left = [];
            const width = graph.getWidth();
            const height = graph.getHeight();
            nodes.forEach(node => {
              if (nodes_100.length < 100 && Math.random() < 0.2) {
                nodes_100.push(node);
              } else {
                graph.hide(node.id);
                nodes_left.push(node);
              }
            });
            if (simulation) {
              simulation.alphaTarget(0.3).restart();
            } else {
              simulation = forceSimulation(nodes_100)
                .force('collision', forceCollide().radius(model => {
                  return model.size / 2 * 1.2;
                }).iterations(2))
                .velocityDecay(0.2)
                .force("x", d3.forceX().strength(0.001))
                .force("y", d3.forceY().strength(0.001))
                .on('tick', () => {
                  graph.updateNodePosition();
                });
            }
            // 每隔一段时间添加一个节点
            setTimeout(()=>{
              let concatNodes = nodes_100;
              const interval = setInterval(()=>{
                if(nodes_left.length>0) {
                  const node = nodes_left[parseInt(Math.random()*nodes_left.length)];
                  Util.remove(nodes_left, node);
                  node.x = 0;
                  node.y = 0;
                  concatNodes = concatNodes.concat(node);
                  simulation.nodes(concatNodes)
                  .alpha(2).restart();
                  setTimeout(()=>{
                    if(node.x && node.y && node.x !==0 && node.y !== 0) {
                      graph.find(node.id).show();
                    }
                  }, 32);
                  
                } else {
                  simulation
                  .force("x", null)
                  .force("y", null)
                  .alpha(2).restart();
                  clearInterval(interval);
                }
              }, 16)
            }, 3000);
          }
        }, 
      });
      graph.read(data);
      graph.translate(-300, 0)
    });
    }, 5000)


  </script>
</body>
</html>

